<template>
	<view>
		<view class="details">
			<view class="details-top">
				<view class="details-pic">
					<image :src="infoImg" mode="scaleToFill"></image>
				</view>
				<view class="de-title">{{list.title}}</view>
				<view class="descri">{{list.content}}</view>
				<view class="de-mid">
					<view class="price">￥{{price}}</view>
					<!-- <image src="http://yunzhidun.oss-cn-beijing.aliyuncs.com/weixin/static/shop/share.png" class="de-icon" mode="widthFix"></image> -->
				</view>
			</view>
			
			<view class="details-min">
				<view class="min-title">商品详情</view>
				<!-- <view class="pictuer" >
					<image :src="image" mode=""></image>
				</view> -->
				<view class="con">
					<u-parse :content="htmlNodes" noData=" " @preivew='preivew' @navigate="navigate" class='parse'></u-parse>
				</view>
			</view>
			
		</view>
		
		<view class="details-foot">
			<!-- <view class="service">
				<image src="http://yunzhidun.oss-cn-beijing.aliyuncs.com/weixin/static/shop/service.png" mode="widthFix" class="service-pic"></image>
				<view class="service-con">咨询</view>
			</view>
			<view class="cart" @tap="goCart">
				<image src="http://yunzhidun.oss-cn-beijing.aliyuncs.com/weixin/static/shop/shopping.png" mode="widthFix" class="cart-pic"></image>
				<view class="service-con">购物车</view>
			</view>
			<view class="add-cart" @tap="showPop">加入购物车</view> -->
			<view class="buy" @tap="showPop">立即购买</view>
		</view>
		
		<!-- 底部弹出层 -->
		<view class="pop" v-show="isShow" @touchmove.stop.prevent='preventHandler'>
			<!-- 蒙层 -->
			<view class="pop-mask" @tap="hidePop"></view>
			<!-- 内容块 -->
			<view class="pop-box" :animation="animationData">
				<view>
					<image class="pop-img" :src="infoImg" mode=""></image>
				</view>
				<view class="pop-num">
					<view>购买数量</view>
					<uniNumberBox
						min="1"
						:value="num"
						@change="changeNumber"
					></uniNumberBox>
				</view>
				<view class="pop-sub" @tap="addCart(list.id,num)">
					确定
				</view>
			</view>
		</view>
		
	</view>
	
</template>

<script>
	let App = getApp();
	import uniNumberBox from '@/components/uni/uni-number-box/components/uni-number-box/uni-number-box.vue'
	import uParse from '@/components/u-parse/u-parse.vue';
	export default {
		data() {
			return {
				isShow:false,
				animationData:{},
				num:1,
				number:5,
				list:[],
				money:0,
				profit:0,
				userName:'',
				provinceName:'',
				cityName:'',
				countyName:'',
				detailInfo:'',
				telNumber:'',
				infoImg:'',
				image:'',
				show1:false,
				htmlNodes:'',
				check:false,
				forward:0,
				price:0
			}
		},
		components:{
			uniNumberBox,
			uParse
		},
		onLoad(options) {
			console.log(options)
			this.getGoods(options.id)
		},
		//修改返回默认行为
		onBackPress() {
			if(this.isShow){
				this.hidePop();
				return true;
			}
		},
		methods: {
			changeNumber(value){
				this.num = value;
			},
			preventHandler(){
				return
			},
			goCart(){
				uni.navigateTo({
					url:("/pages/shop/cart/cart")
				})
			},
			addCart(id,num){
				uni.navigateTo({
					url:`/pages/shop/pay?id=${id}&num=${num}`
				})
			},
			showPop(){
				var animation = uni.createAnimation({
					duration:300
				})
				
				animation.translateY(600).step();
				this.animationData = animation.export();
				
				this.isShow = true;
				
				setTimeout(()=>{
					animation.translateY(0).step();
					this.animationData = animation.export();
				},500)
				
			},
			hidePop(){
				var animation = uni.createAnimation({
					duration:300
				})
				
				animation.translateY(600).step();
				this.animationData = animation.export();
				
				this.isShow = true;
				
				setTimeout(()=>{
					animation.translateY(0).step();
					this.isShow = false;
				},500)
				
			},
			
			getGoods(id){
				uni.showLoading({
					title:"加载中"
				})
				this.$api.interfaceApi('getGoodsInfo')({
					id:id
				}).then(res=>{
					if(res.code == 200){
						this.list = res.data
						this.price = res.data.price
						this.money = this.changeTwoDecimal_f(this.price * this.number)
						this.htmlNodes = res.data.introduction
						this.infoImg =  res.data.info_image
						this.image =  res.data.image
						this.forward =  res.data.forward
						if(res.data.min_profit == 0 &&  res.data.max_profit == 0){
							this.profit = 0
						}else{
							this.profit = res.data.min_profit * this.number +"-"+ res.data.max_profit * this.number + "元"
						}
					}
					uni.hideLoading()
				})
			},
			changeTwoDecimal_f(x)
			{ 
			　　var f_x = parseFloat(x); 
			　　if (isNaN(f_x)) 
			　　{ 
			　　　　return 0; 
			　　} 
			　　var f_x = Math.round(x*100)/100; 
			　　var s_x = f_x.toString(); 
			　　var pos_decimal = s_x.indexOf('.'); 
			　　if (pos_decimal < 0) 
			　　{ 
			　　　　pos_decimal = s_x.length; 
			　　s_x += '.'; 
			　　} 
			　　while (s_x.length <= pos_decimal + 2) 
			　　{ 
			　　　　s_x += '0'; 
			　　} 
			　　return s_x; 
			},
		}
	}
</script>

<style>
@import url("details.css");

</style>
